<template>
    <div>
        <div class="message_send" style="min-height: 60px">
            <el-input type="textarea" :autosize="{ minRows: 1, maxRows: 3}" v-model="text"
                      placeholder="说点什么"></el-input>
            <el-popover placement="bottom-start" trigger="click" :visible-arrow="false" popper-class="emojiwrap">
                <div class="emojis">
                    <div v-for="item in emojiName" class="emoji" :key="item" @click="chooseEmoji(item)">
                        <img :src="emojiUrl + emojiMap[item]"/>
                    </div>
                </div>
                <div slot="reference" class="message_send_expression">
                    <img src="../assets/img/expression.png" alt="">
                </div>
            </el-popover>

            <i class="el-icon-folder-opened" @click="handleSendFileClick"></i>
            <div class="message_send_button" @click="handleSendMessage">
                发送
            </div>
        </div>
        <input type="file" id="filePicker" ref="filePicker" @change="sendFile" style="display:none"/>
    </div>
</template>

<script>
    import { emojiMap, emojiName, emojiUrl } from '../libs/emojiMap'

    export default {
        name: "send-box",
        props:['service_id'],
        data() {
            return {
                emojiMap: emojiMap,
                emojiName: emojiName,
                emojiUrl: emojiUrl,
                text: '',
            }
        },
        methods:{
            chooseEmoji(item) {
                this.text += item
            },
            handleSendMessage() {
                if(this.text){
                    let id;
                    if(this.service_id){
                        id = this.service_id + 'b'
                    }else{
                        id = sessionStorage.getItem('service_id') + 'b'
                    }
                    const message = this.tim.createTextMessage({
                        to: id,
                        conversationType: TIM.TYPES.CONV_C2C,
                        payload: {text: this.text}
                    });
                    this.tim.sendMessage(message);
                    console.log(message)
                    this.text = '';
                    this.$store.commit('pushCurrentMessageList', message)
                    this.$bus.$emit('scroll-bottom');
                    this.$emit("on-show-time",message.time);
                }
            },
            handleSendFileClick() {
                this.$refs.filePicker.click()
            },
            sendFile() {
                const message = this.tim.createFileMessage({
                    to: this.service_id + 'b',
                    conversationType: TIM.TYPES.CONV_C2C,
                    payload: {
                        file: document.getElementById('filePicker') // 或者用event.target
                    },
                    onProgress: percent => {
                        this.$set(message, 'progress', percent) // 手动给message 实例加个响应式属性: progress
                    }
                })
                this.tim.sendMessage(message).catch(imError => {
                    this.$store.commit('showMessage', {
                        message: imError.message,
                        type: 'error'
                    })
                })
                this.$refs.filePicker.value = null;
                this.$emit("on-show-time",message.time);
                this.$store.commit('pushCurrentMessageList', message)

            },
        },

    }
</script>

<style scoped>

</style>